<template>
    <van-skeleton title :row="3" v-if="gj" />


    <div v-else>
        <!-- 加载 -->
        <van-loading color="#1989fa" />
        <van-nav-bar title="分类" left-text="返回" left-arrow @click-left="onClickLeft" />

        <!-- 布局 -->

        <van-row>
            <van-col span="6">

                <van-sidebar v-model="active">
                    <van-sidebar-item v-for="item in fl" :title="item.cat_name" />

                </van-sidebar>

            </van-col>
            <van-col span="18">
                <van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" @click="ss" />

                <div v-for="item in fl[active]?.children">
                    <van-grid :column-num="3">
                        <van-pull-refresh v-model="loading" @refresh="onRefresh">
                            <router-link :to="{ name: 'lb', params: { query: item.cat_name } }">
                                <van-grid-item v-for="items in item.children" :icon="items.cat_icon"
                                    :text="items.cat_name" />
                            </router-link>

                        </van-pull-refresh>


                    </van-grid>
                </div>
            </van-col>

        </van-row>

    </div>
</template>

<script setup>
import { categoriesAppi } from '@/api/api';

import { useRouter } from 'vue-router';
let router=useRouter()
let ss=()=>{
    router.push('/ss')
}
let fl = ref([]);
let active = ref('');

categoriesAppi().then(res => {
    console.log("分类", res);
    fl.value = res.data.message;
})

import { showToast } from 'vant';
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        count.value++;
    }, 1000);
}


import { ref } from 'vue';
let gj = ref(true);
setTimeout(() => {
    gj.value = false
}, 1000)
</script>


<style lang="scss" scoped></style>